<template>
    <div class="storageBox">
		<div class="center">
			<div class="storageEcharts" id="storage"></div>
			<div class="storageEcharts" id="storage2"></div>
			<ul class="storageEcharts">
				<li>
					<span>152G</span> / 200G
				</li>
				<li>
					<span>48G</span> / 200G
				</li>
				<li>
					<span>200G</span> / 200G
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import 'echarts-liquidfill' // 引入水球js
    export default {
        name: 'storage',
		methods: {
			echarts () {
				var baifenbi = [1, 0.24, 0.76]
				var grayBar = [1, 1, 1]
				var paiming = [1, 2, 3]
				var zongjine = [2000, 3000, 4000]
				var xingm = ['设备存储总量', '设备已使用情况', '设备未使用情况']
				var option = {
					color: ['#fff'], // 进度条颜色
					/*  grid: {
						 left: '-10%',  //如果离左边太远就用这个......
						 //right: '14%',
						 bottom: '5%',
						 top: '5%',
						 containLabel: true
					 } */
					xAxis: [{
							show: false
						},
						// 由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
						{
							show: false
						}
					],
					yAxis: {
						type: 'category',
						axisLabel: {
							show: false // 让Y轴数据不显示
						},
						itemStyle: {

						},
						axisTick: {
							show: false // 隐藏Y轴刻度
						},
						axisLine: {
							show: false // 隐藏Y轴线段
						},
						data: xingm
					},
					series: [
						// 背景色--------------------我是分割线君------------------------------//
						{
							show: true,
							type: 'bar',
							barGap: '-100%',
							barWidth: '35%', // 统计条宽度
							itemStyle: {
								normal: {
									color: '#fafafa'
								}
							},
							z: 1,
							data: grayBar
						},
						// 蓝条--------------------我是分割线君------------------------------//
						{
							show: true,
							type: 'bar',
							barGap: '-100%',
							barWidth: '35%', // 统计条宽度
							itemStyle: {
								normal: {
									color: {
										type: 'bar',
										colorStops: [{
											offset: 0,
											color: '#39A7FC' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#00FBFF' // 100% 处的颜色
										}],
										globalCoord: false // 缺省为 false
									}
								}
							},
							max: 1,
							label: {
								normal: {
									show: true,
									textStyle: {
										color: '#fff' // 百分比颜色
									},
									position: 'inside',
									// 百分比格式
									formatter: function (data) {
										return (baifenbi[data.dataIndex] * 100).toFixed(1) + '%'
									}
								}
							},
							labelLine: {
								show: false
							},
							z: 2,
							data: baifenbi
						},
						// 数据条--------------------我是分割线君------------------------------//
						{
							show: true,
							type: 'bar',
							xAxisIndex: 1, // 代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
							barGap: '-100%',
							barWidth: '25%', // 统计条宽度
							itemStyle: {
								normal: {
									barBorderRadius: 200,
									color: 'transparent'
								}
							},
				label: {
					normal: {
						show: true,
						// label 的position位置可以是top bottom left,right,也可以是固定值
						// 在这里需要上下统一对齐,所以用固定值
						position: [0, '-100%'],
						rich: { // 富文本
							white: { // 自定义颜色
								color: '#333'
							}
						},
						formatter: function (data) {
							// 富文本固定格式{colorName|这里填你想要写的内容}
							if (paiming[data.dataIndex] === 1) {
								return '{start1|}{white|' + xingm[data.dataIndex] + '}'
							} else if (paiming[data.dataIndex] === 2) {
								return '{start1|}{white|' + xingm[data.dataIndex] + '}'
							} else if (paiming[data.dataIndex] === 3) {
								return '{start1|}{white|' + xingm[data.dataIndex] + '}'
							}
						}
					}
				},
				data: zongjine
			}

		]
	}
				var myChart = echarts.init(document.getElementById('storage2'))
				myChart.setOption(option)
			},
			liquidFill (id, title, subTitle, num, color, color2) { // 方法
				var liquid = echarts.init(document.getElementById(id))
				liquid.setOption({
					title: { // 标题
						text: title,
						subtext: subTitle,
						textStyle: { // 标题的样式
							color: '#c5c5c5', // 字体颜色
							fontFamily: 'Microsoft YaHei', // 字体
							align: 'center', // 文字的水平方式
							verticalAlign: 'top', // 文字的垂直方式
							fontWeight: 'normal',
							fontSize: 14
						},
						subtextStyle: {
							color: '#101010',
							fontSize: 14
						},
						left: 'center', // 定位
						y: '70px'
						// backgroundColor: '#03dbdb' // 文字区域的背景颜色
					},
					series: [{
						type: 'liquidFill', // 类型
						data: [num, num], // 数据是个数组 数组的每一项的值是0-1
						label: {
							normal: {
								textStyle: {
									fontSize: 60,
									color: '#EC664B',
									fontWeight: 'normal'
								}
							}
						},
						outline: {
							// show: true , //是否显示轮廓 布尔值
							borderDistance: 0, // 外部轮廓与图表的距离 数字
							itemStyle: {
									// borderColor:'rgba(255,0,0,0.09)', //边框的颜色
									borderWidth: 0 // 边框的宽度
									// shadowBlur: 5 , // 外部轮廓的阴影范围 一旦设置了内外都有阴影
									// shadowColor: '#000' //外部轮廓的阴影颜色
							}
						},
						backgroundStyle: {
							color: color2, // 图表的背景颜色
							// borderWidth: '10',//图表的边框宽度
							// borderColor: '#000',//图表的边框颜色
							itemStyle: {
								shadowBlur: 100, // 设置无用
								shadowColor: '#f60', // 设置无用
								opacity: 1 // 设置无用
							}
						},
						itemStyle: {
							opacity: 0.5, // 波浪的透明度
							shadowBlur: 10, // 波浪的阴影范围
							shadowColor: '#f60' // 阴影颜色
						},
						emphasis: {
							itemStyle: {
								opacity: 1 // 鼠标经过波浪颜色的透明度
							}
						},
						color: ['rgba(255,0,0,0.3)', color, 'rgba(255,0,0,0.3)'], // 水波的颜色 对应的是data里面值
						shape: 'circle', // 水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
						center: ['50%', '50%'], // 图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
						radius: '80%', // 图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
						amplitude: 3, // 振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
						waveLength: '50%', // 波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
						phase: 0, // 波的相位弧度 默认情况下是自动
						period: (value, index) => { // 控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引
								return index * 2000
						},
						direction: 'left', // 波移动的速度 两个参数  left 从右往左 right 从左往右
						waveAnimation: true, // 控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
						animationEasing: 'linear', // 初始动画
						animationEasingUpdate: 'quarticInOut', // 数据更新的动画效果
						animationDuration: 3000, // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
						animationDurationUpdate: 300 // 数据更新动画的时长

					}]
						// backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
				})
			}
		},
		mounted () {
			this.echarts()
			// id,标题，副标题，百分比，波浪颜色，球体颜色
			this.liquidFill('storage', '48/200', '设备存储使用情况', 48 / 200, '#DB1C1A', '#fafafa')
		}
    }
</script>

<style scoped>
	.storageEcharts{
		width: 400px;
		height: 400px;
		float: left;
	}
	div.center{
		width: 1200px;
		margin: 0 auto;
	}
	#storage{
		margin-right: 200px;
	}
	div.storageBox{
		background: #fff;
		padding: 50px 0;
		position: relative;
		top: 12px;
		height: 500px;
	}
	ul.storageEcharts{
		position: relative;
		width: 200px;
	}
	ul.storageEcharts li:nth-child(1){
		position: absolute;
		top: 100px;
	}
	ul.storageEcharts li:nth-child(2){
		position: absolute;
		top: 197px;
	}
	ul.storageEcharts li:nth-child(3){
		position: absolute;
		top: 288px;
	}
	ul.storageEcharts li span{
		color: #EC664B
	}
</style>
